<script setup>
defineProps({
  item: Object,
});
</script>

<template>
  <div class="goods-item" @click="$router.push(`/prodetail/${item.goods_id}`)">
    <div class="left">
      <img :src="item.goods_image" alt="" />
    </div>
    <div class="right">
      <p>
        {{ item.goods_name }}
      </p>
      <p>已经出售{{ item.goods_sales }}件</p>
      <p>
        <span>￥{{ item.goods_price_min }}</span>
        <del>￥{{ item.goods_price_max }}</del>
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.goods-item {
  height: 140px;
  margin-bottom: 5px;
  padding: 8px;
  display: flex;
  .left {
    width: 124px;
    height: 124px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .right {
    flex: 1;
    // background-color: yellow;
    margin-left: 8px;
    text-align: left;
    p:nth-child(1) {
      height: 75px;
      font-size: 14px;
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 显示省略号 */
      word-break: break-all;
    }
    p:nth-child(2) {
      //   background-color: purple;
      color: grey;
      height: 30px;
      font-size: 13px;
      line-height: 30px;
    }
    p:nth-child(3) {
      font-size: 17px;
      span:nth-child(1) {
        color: red;
        margin-right: 7px;
      }
      del {
        font-size: 12px;
      }
    }
  }
}
</style>
